<template>
  <el-dialog :visible.sync="visible"
             v-dialogDrag
             :title="title"
             class="tl-dialog dialog-changelog"
             width="40%"
             top="10px"
             :append-to-body="true"
             :modal-append-to-body="true"
             :close-on-press-escape="false"
             :close-on-click-modal="false"
             @open="open" :destroy-on-close="true">
    <!-- <div style="height: 70vh;overflow:scroll;overflow-x: hidden;"> -->
    <div style="height: 70vh">
      <el-scrollbar style="height: 100%">
        <el-timeline v-if="datas.length>0">
          <el-timeline-item v-for="(data, index) in datas"
                            :key="index"
                            type='primary'
                            color='#0a6ed2'
                            size='large'
                            :timestamp="data.createon" placement="top">
            <el-card>
            <h4>{{data.title}}</h4>
            <ul style="list-style:none;">
              <li style="list-style:none;" v-for="(item, index) in data.displayContent" :key="index">
                <p v-if="data.operatetype === 'edit'"><span v-if="item.name" class="operate">修改</span><span class="column"> {{item.name}} </span><span v-if="item.old"> {{item.old}} </span><span v-if="!item.old"> 无 </span><span v-if="item.name" class="arrow"> ==> </span><span v-if="item.new"> {{item.new}}</span><span v-if="!item.new"> 无 </span></p>
                <p v-if="data.operatetype === 'add'"><span class="operate">新增</span><span class="column"> {{item.name}} </span><span v-if="item.old"> {{item.old}}</span><span v-if="item.new"> {{item.new}}</span></p>
                <p v-if="data.operatetype === 'del'"><span class="operate">删除</span><span class="column"> {{item.name}} </span><span v-if="item.old"> {{item.old}}</span><span v-if="item.new"> {{item.new}}</span></p>
              </li>
            </ul>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <p v-else style="text-align:center;font-size:300px;margin:0;margin-top:20px;">
          <svg-icon icon-class="nodata"></svg-icon>
        </p>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
/** 工具类 */
import {
  getAction,
  putAction,
  postAction,
  deleteAction
} from '@tapui/utils/http'
export default {
  name: 'baseChangeLog',
  mixins: [mixin_list],
  components: {},
  data() {
    return {
      description: '变更记录表-列表查询',
      urlPrefix: '/base/changeLog/',
      url: {
        // queryCodeList: '/base/changeLog/dataCodeList'
        list: '/base/changeLog/queryChangeHistoryLog'
      },
      visible: false,
      isQueryOnCreated: false
    }
  },
  props: {
    title: {
      type: String,
      default: '变更历史'
    },
    sourceId: {
      type: String,
      default: ''
    },
    sourceType: {
      type: String,
      default: ''
    },
    topSourceType: {
      type: String,
      default: ''
    },
    topSourceId: {
      type: String,
      default: ''
    },
    sourceKind: {
      type: String,
      default: ''
    },
    sqlWhere: {
      type: String,
      default: ''
    },
    parentValue: {
      type: String,
      default: ''
    }
  },
  methods: {
    open() {
      this.datas = []
      this.loadData()
    },
    loadData(paramMap) {
      if (!this.url.list) {
        this.$tap.message('请设置list地址!', 'warning')
        return
      }
      // 查询条件
      var params = {}
      if (this.sourceId !== '') {
        params.sourceId = this.sourceId
      }
      if (this.sourceType !== '') {
        params.sourceType = this.sourceType
      }
      if (this.topSourceType !== '') {
        params.topSourceType = this.topSourceType
      }
      if (this.topSourceId !== '') {
        params.topSourceId = this.topSourceId
      }
      if (this.sourceKind !== '') {
        params.sourceKind = this.sourceKind
      }
      if (this.sqlWhere !== '') {
        params.sqlWhere = this.sqlWhere
      }
      if (this.parentValue !== '') {
        params.parentValue = this.parentValue
      }
      // 数据查询
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.datas = res.result
            // 初始化自定义列
            if (typeof this.$refs.toolbar !== 'undefined') {
              this.$refs.toolbar.doInitTableColumn()
            }
          } else {
            this.$tap.message(res.message, 'warning')
          }
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
    overflow-x: hidden;
}
</style>
<style lang="scss">
.dialog-changelog{
  .el-timeline{
    padding-left:10px;
    .el-card{
      margin-right:10px;
    }
    .el-card__body{
      padding:0 15px;
      h4{
        margin:15px 0 10px 0;
      }
      ul li{
        line-height: 24px;
        p{
          margin:8px;
        }
      }
      .operate,.arrow{
        color:#bbb;
      }
      .column{
        color:#0a6ed2;
      }
    }
  }
}
</style>
